.article-page {
    .nav-content {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #fff;

        .left {
            height: 100%;
            display: flex;
            align-items: center;
            position: absolute;
            left: 8px;

            .author {
                display: flex;
                align-items: center;
                opacity: 0;
                transition: all 0.2s ease-in-out;

                .avatar {
                    margin-right: 6px;
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .avatar-img {
                        width: 28px;
                        height: 28px;
                        border-radius: 50%;
                    }
                }

                .name {
                    font-size: 14px;
                    font-weight: 500;
                    color: $xboot-text-color;
                }

                .follow {
                    margin-left: 6px;
                    font-size: 14px;
                    font-weight: 500;
                    color: $xboot-error;
                }

                .followed {
                    margin-left: 6px;
                    font-size: 14px;
                    font-weight: 500;
                    color: $xboot-text-color-black-grey;
                }
            }

            .author-show {
                opacity: 1;
            }
        }

        .right {
            height: 100%;
            display: flex;
            align-items: center;
            position: absolute;
            right: 15px;

            .r {
                margin-right: 20px !important;
            }

            .r2 {
                margin-right: 3px !important;
            }

            .top {
                margin-top: 2px !important;
            }
        }
    }

    .content {
        padding-top: calc(var(--status-bar-height) + 44px);
        padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .article-header {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 15px;

            .title {
                color: $xboot-text-color;
                line-height: 32px;
                font-weight: 700;
                font-size: 24px;
                margin-bottom: 16px;
            }

            .author {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    display: flex;
                    align-items: center;

                    .avatar {
                        margin-right: 6px;
                        width: 36px;
                        height: 36px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .avatar-img {
                            width: 36px;
                            height: 36px;
                            border-radius: 50%;
                        }
                    }

                    .info {
                        display: flex;
                        flex-direction: column;

                        .name {
                            font-size: 14px;
                            font-weight: 500;
                            color: $xboot-text-color;
                        }

                        .desc {
                            font-size: 12px;
                            color: $xboot-text-color-grey;
                        }
                    }
                }
            }
        }

        .article-content {
            padding: 15px;
        }

        .comment-content {
            padding: 15px;

            .title {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    font-size: 17px;
                    font-weight: 500;
                    color: $xboot-text-color;
                }

                .right {
                    font-size: 15px;
                    color: $xboot-text-color-grey;
                }
            }

            .comment-item {
                padding: 15px 0;
                display: flex;

                .left {
                    margin-right: 8px;

                    .avatar {
                        width: 36px;
                        height: 36px;
                        border-radius: 50%;
                    }
                }

                .right {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .top {
                        height: 36px;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .head {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;

                            .l {
                                font-size: 15px;
                                font-weight: 500;
                            }

                            .r {
                                font-size: 14px;
								.icon {
									margin-left: 6px !important;
								}
                            }
                        }

                        .desc {
                            font-size: 12px;
                            color: $xboot-text-color-grey;
                        }
                    }

                    .center {
                        padding: 4px 0 6px 0;
                        font-size: 16px;
                    }

                    .bottom {
                        display: flex;
                        align-items: center;

                        .reply {
                            font-size: 12px;
                            margin-right: 8px;
                            background: $xboot-bg-color-hover;
                            padding: 3px 4px 3px 8px;
                            border-radius: 20px;
                            display: flex;
                            align-items: center;
                        }

                        .opcity {
                            opacity: 0.5;
                        }

                        .time {
                            font-size: 13px;
                            color: $xboot-text-color-grey;
                        }
                    }
                }
            }
        }
    }

    .operation-bar {
        width: 750rpx;
        height: 50px;
        background: #fff;
        display: flex;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
        padding-left: 30rpx;
        padding-bottom: env(safe-area-inset-bottom);

        .opcity {
            opacity: 0.5;
        }

        .comment {
            display: flex;
            align-items: center;
            background: $xboot-bg-color-grey;
            width: 270rpx;
            height: 35px;
            padding: 0 10px;
            border-radius: 36rpx;
            color: #555;

            .icon-edit {
                font-size: 20px;
                margin-right: 5px;
            }

            .write {
                font-size: 14px;
            }
        }

        .right-btns {
            width: 390rpx;
            padding-left: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .operation-item {
                position: relative;
                display: flex;
                align-items: center;
				padding: 8px;
            }
        }
    }

    .edit-content {
        padding: 15px 20px;
        padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
        display: flex;
        flex-direction: column;
        .input-content {
            display: flex;
            justify-content: space-between;
            .input {
                width: 530rpx;
            }
            .btn {
                display: flex;
                align-items: center;
            }
        }
        .btns {
            display: flex;
            align-items: center;
            .item {
                padding-top: 8px;
                margin-right: 16px;
            }
            .iconfont {
                color: #444;
                font-size: 26px;
            }
            .opcity {
                opacity: 0.5;
            }
        }
    }

	.action {
		padding: 18px 15px 0 15px;
		background: #F5F5F5;
		display: flex;
		align-items: center;
		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
            margin-right: 24px;
            margin-bottom: 18px;
            .icon {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 8px;
                background: #fff;
                .iconfont {
                    color: #444;
                }
                .icon-forward {
                    font-size: 26px;
                }
                .icon-link {
                    font-size: 29px;
                }
            }
            .icon-hover {
                background: #F5F5F5;
            }
            .title {
                font-size: 13px;
                color: #444;
            }
		}
	}
}